<template>
  <ScreenFit>
    <BaseLayout :show-header="true">
      <template v-slot:aside-search>
        <SelectCompany></SelectCompany>
      </template>
      <template v-slot:aside-content>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <!-- <el-tab-pane label="告警" name="warning"> </el-tab-pane> -->
          <el-tab-pane label="任务" name="task">
            <div class="warning">
              <div
                class="warning-box"
                v-infinite-scroll="load"
                :infinite-scroll-disabled="disabled"
                :infinite-scroll-immediate="false"
                infinite-scroll-distance="10"
              >
                <div v-for="(item, index) in patrolTaskList" :key="index">
                  <div
                    class="warning-li"
                    @click="handleSelectTask(item)"
                    :class="{ taskPoint: selectedTask.rearerId == item.wens_rearer_wens_easid }"
                  >
                    {{ item.wens_alarm_id }}
                    <div class="warning-li-title">
                      <span>{{ item?.wens_rearer_name || '-' }}</span>
                      <el-tag type="success" effect="dark" v-if="item.wens_task_status == '2'">
                        {{ item?.wens_task_status_title }}
                      </el-tag>
                      <el-tag type="warning" effect="dark" v-else>
                        {{ item?.wens_task_status_title }}
                      </el-tag>
                    </div>
                    <div class="warning-li-info">
                      <span>告警事项</span>
                      <span
                        >{{ item?.wens_alarm_level == 1 ? 'I' : 'II' }}级-{{
                          item?.wens_event_type_title
                        }}告警</span
                      >
                    </div>
                    <div class="warning-li-info">
                      <span>告警时间</span><span>{{ item?.wens_datetime || '-' }}</span>
                    </div>
                    <div class="warning-li-info">
                      <span>处理时间</span><span>{{ item?.modifytime || '-' }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-slot:header>
        <TaskDetailHeader
          ref="TaskDetailHeaderRef"
          :rearerId="selectedTask.rearerId"
        ></TaskDetailHeader>
      </template>
      <template v-slot:main>
        <div class="main">
          <div class="main-title"><span class="main-title-icon"></span>任务信息</div>
          <div class="main-content">
            <AlarmInfo :rearerId="selectedTask.rearerId" @change="alarmTaskChange"></AlarmInfo>
            <div class="main-right">
              <AlarmInfoDetail
                :fid="selectedAlarmTaskId"
                :orgId="baseParamStore.baseParam.orgId"
              ></AlarmInfoDetail>
            </div>
          </div>
        </div>
      </template>
    </BaseLayout>
  </ScreenFit>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import BaseLayout from '@/components/layouts/BaseLayout.vue'
import { getPatrolTaskListByOrgId } from '@/api/api'
import TaskDetailHeader from '@/components/TaskDetail/TaskDetailHeader.vue'
import SelectCompany from '@/components/SelectCompany.vue'
import AlarmInfo from '@/components/TaskDetail/AlarmInfo.vue'
import AlarmInfoDetail from '@/components/TaskDetail/AlarmInfoDetail.vue'
import { useBaseParamStore } from '@/stores/baseParams'

const baseParamStore = useBaseParamStore()
const route = useRoute()
const activeName = ref('task')
const imageList = ref([{}])
const type = ref(1)
const patrolTaskList = ref([]) // 获取服务部告警任务列表
const patrolAlarmbyRearerList = ref() // 获取服务部告警任务列表
const TaskDetailHeaderRef = ref(null)
const selectedTask = ref({
  rearerId: '',
  id: ''
})
const selectedAlarmTaskId = ref()

// 选择任务
const handleSelectTask = async (row) => {
  selectedTask.value.rearerId = row.wens_rearer_wens_easid
  // selectedTask.value.id = row.id
}

// 选中的告警任务
const alarmTaskChange = (value) => {
  selectedAlarmTaskId.value = value
}

const disabled = computed(() => {
  return taskListParams.value.finished
})

const load = () => {
  if (taskListParams.value.finished == false) {
    taskListParams.value.pageNum++
    fetchPatrolTaskListByOrgId()
    console.log('加载更多')
  }
}

const taskListParams = ref({
  pageNum: 1,
  pageSize: 20,
  total: 0,
  loading: false,
  finished: false
})
// 获取服务部告警列表
const fetchPatrolTaskListByOrgId = async () => {
  try {
    const res = await getPatrolTaskListByOrgId({
      orgId: baseParamStore.baseParam.orgId,
      pageSize: taskListParams.value.pageSize,
      pageNo: taskListParams.value.pageNum
    })
    if (res && res.data) {
      if (res.data.rows.length > 0) {
        patrolTaskList.value.push(...res.data.rows)
        selectedTask.value.rearerId =
          route.query.rearerId || patrolTaskList.value[0]?.wens_rearer_wens_easid
        selectedTask.value.id = route.query.id || patrolTaskList.value[0]?.id
        if (res.data.lastPage) {
          taskListParams.value.finished = true
        } else {
          taskListParams.value.finished = false
        }
      } else {
        taskListParams.value.finished = false
      }
    }
  } catch (error) {
    console.error('获取服务部任务列表信息失败:', error)
  }
}

const handleClick = (tab, event) => {
  console.log(tab, event)
}

onMounted(() => {
  fetchPatrolTaskListByOrgId()
})
</script>

<style scoped lang="scss">
:deep(.el-tabs__item) {
  width: 100px;
}

:deep(.el-tabs) {
  height: 100%;

  .el-tab-pane {
    height: 100%;
  }
}

.taskPoint {
  border: 2px solid blue;
}

.warning {
  height: 100%;
  padding-bottom: 10px;
  &-box {
    height: 100%;
    overflow-y: auto;
  }

  &-li {
    box-sizing: border-box;
    margin-bottom: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    line-height: 30px;
    background-image: linear-gradient(to right, #002f67, #0049a0);
    padding: 15px 20px;
    border-radius: 5px;
    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      line-height: 40px;
      font-weight: bold;
    }
    &-info {
      display: flex;
      justify-content: space-between;
      color: #cdcdcd;
    }
  }
}

.main {
  overflow-y: hidden;
  padding: 10px 20px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  &-title {
    padding: 10px 0 30px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    &-icon {
      display: block;
      width: 5px;
      height: 16px;
      background-color: #409dfd;
      margin-right: 10px;
    }
  }
  &-content {
    display: flex;
    width: 100%;
    height: calc(100% - 50px);
    flex: 1;
  }

  &-right {
    flex: 1;
    height: 100%;
    padding: 0px 0px 0px 50px;
    border-left: 3px solid #2a4e7a;
    box-sizing: border-box;
    .content {
      height: 100%;
      display: flex;
      flex-direction: column;

      &-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 20px;
      }

      &-box {
        overflow-y: auto;
        flex: 1;
        width: 100%;

        .card {
          width: 49%;
          margin-bottom: 10px;
          padding: 10px;
          border: 1px solid #ccc;

          &-title {
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
          }

          &-span {
            line-height: 24px;
          }
        }
      }
    }
  }
}
</style>
